<style lang="scss" scoped>
.layer-tree {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 180px;
  padding: 10px;
  background-color: white;
  box-shadow: 1px 2px 4px 0 #c5c5c5;

}
</style>

<template>
    <div class="layer-tree">
        <el-tree
            :default-checked-keys="checkedKeys"
            :default-expanded-keys="expandedKeys"
            node-key="id"
            :props="props"
            :data="nodes"
            show-checkbox
            @check-change="handleCheckChange"
        ></el-tree>
    </div>
</template>
<script>
import { loadModules } from "esri-loader";

export default {
  data() {
    return {
      props: {
        label: "label",
        children: "children"
      },
      nodes: [
        {
          label: "应急图层",
          show: false,
          id: 1,
          children: [
            {
              id: 2,
              url:
                "http://www.dzmap.cn/arcgis/rest/services/hn1w/MapServer",
              label: "医院",
              show: false,
              type: "MapImageLayer"
            },
            {
              id: 3,
              url:
                "http://www.dzmap.cn/arcgis/rest/services/shengshixianxiang/MapServer",
              label: "交通",
              show: false,
              type: "MapImageLayer"
            },
            {
              id: 4,
              url: "http://www.dzmap.cn/arcgis/rest/services/xuexiao/MapServer",
              label: "学校",
              show: false,
              type: "MapImageLayer"
            }
          ]
        }
      ],
      count: 1,
      checkedKeys: [],
      expandedKeys: [],
      layers: []
    };
  },
  props: {
    map: Object
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
        this.layers.map(layer=>{
            if(layer.id ==data.id){
                layer.layer.visible = checked
                return
            }
        })
    },
    init() {
      this.mapNodes(this.nodes);
    },
    mapNodes(nodes) {
      let _this = this;
      if (nodes) {
        nodes.map(node => {
          if (node.url) {
            _this.addLayer(node);
          }
          _this.mapNodes(node.children);
        });
      }
    },
    addLayer(node) {
      let map = this.map;
      loadModules(
        [
          "esri/Map",
          "esri/views/MapView",
          "esri/layers/TileLayer",
          "esri/layers/MapImageLayer"
        ],
        {
          css: false,
          url:
            "http://www.dzmap.cn/webapps/other/arcgis/arcgis_js_api/library/4.7/init.js"
        }
      ).then(([ArcGisMap, MapView, TileLayer, MapImageLayer]) => {
        let layer = null;
        if (node.type == "MapImageLayer") {
          layer = new MapImageLayer({
            url: node.url,
            title: node.label,
            visible: node.show
          });
        } else if (node.type == "TileLayer") {
          layer = new TileLayer({
            url: node.url,
            title: node.label,
            visible: node.show
          });
        }
        map.add(layer);
        this.layers.push({
          id: node.id,
          layer: layer
        });
      });
    }
  }
};
</script>

